import { Component, OnInit, ElementRef, Renderer2 } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

declare function test(data): any;

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css']
})
export class DashboardComponent implements OnInit {

  heroes: Hero[] = [];

  constructor(
    private heroService: HeroService,
    private elementRef: ElementRef,
    private renderer2: Renderer2,
  ) { }

  ngOnInit() {
    this.getHeroes();
    console.log(test({ name: "test" }))
  }

  getHeroes(): void {
    this.heroService.getHeroes().subscribe(heroes => {
      this.heroes = heroes.slice(1, 5);
    });
  }

  getThumbnail(): void {
    let _video = this.renderer2.selectRootElement('#my_video');
    let _canvas = this.renderer2.selectRootElement('#my_canvas');
    _canvas.getContext('2d').drawImage(_video, 0, 0, 200, 200);
    let data = _canvas.getContext('2d').getImageData(0, 0, 200, 200);
    let base64 = _canvas.toDataURL();
    console.log(data);
    console.log(base64);
  }

}
